import React, {Component} from 'react'
import {
    Table,
    Form,
    Input,
    Row,
    Col,
    Button,
    DatePicker,
    Pagination,
    Modal
} from 'antd'
import {Content} from './common/layout'

import {fetchListIfNeed} from '../actions/disAction'

import {RECEIVE_GET} from '../actions/disAction'

const FormItem = Form.Item;
const ButtonGroup = Button.Group;
const createForm = Form.create;

/**
 * redux 相关
 */
import {connect} from 'react-redux'

class Index extends Component {
    constructor(props) {
        super(props);

        this.state = props.state.state;
        const {dispatch} = props;
        this.state.url='antd/todo';

        this.DomLoad = (props) => {
            this.setState({loading:true});
            this.getResult();
        }

        this.search = () => {
         this.setState({loading:true});
            let params = this.props.form.getFieldsValue();
            this.state.params=Object.assign({},this.state.params,params);
            this.getResult();
        }

        this.resetFile = () => {
            this.props.form.resetFields();
            this.search();
        }

        this.pageChange=(pagination, filters, sorter)=>{
            let {current,pageSize}=pagination;
            this.state.params=Object.assign({},this.state.params,{page:current,limit:pageSize})
             this.getResult();
        }

        this.getResult=()=>{
            dispatch(fetchListIfNeed(this.state));
        }
    }

     componentDidMount() {
        this.DomLoad(this.props);
    }

    componentWillReceiveProps(nextProps){
        let state=nextProps.state;
        if(state.type===RECEIVE_GET){
            this.state=state.state;
     }
    }

    render() {
        let bread = {
            fist: '首页',
            sec: '列表'
        }
        const {getFieldProps} = this.props.form;
        return (
            <Content bread={bread}>
                <Form inline className="antAdvancedSearchForm">
                    <Row gutter={16} type="flex" justify="center" align="middle">
                        <Col>
                            <FormItem label="登陆账号">
                                <Input {...getFieldProps('loginName',{})} type='text' placeholder="请输入登陆账号"/>
                            </FormItem>
                        </Col>
                        <Col>
                            <FormItem label="真实姓名">
                                <Input {...getFieldProps('trueName',{})} placeholder="请输入真实姓名" size="default"/>
                            </FormItem>
                        </Col>
                        <Col>
                            <Button type="primary" onClick={this.search} icon="search">查询</Button>
                        </Col>
                        <Col span={8}>
                            <Button onClick={this.resetFile}>清除条件</Button>
                        </Col>
                    </Row>
                </Form>
                <div className="antToolBar">
                    <Button type="primary" icon="plus" onClick={this.addApi}>添加Api信息</Button>
                </div>
                <DataTable data={this.state} fun={this.pageChange}/>
            </Content>
        )
    }
}

class DataTable extends Component {
    render() {
        let {loading,list,total,pageSize} = this.props.data;
        let {fun}=this.props;
        let pagination = {};
        if (total) {
            pagination = {
                total,
                pageSize,
                pageSizeOptions: [
                    '5', '10', '15', '20'
                ],
                showTotal: (total) => `共 ${total} 条信息`,
                showSizeChanger: true
            };
        }
        const columns = [
            {
                title: '用户名',
                dataIndex: 'loginName',
                render: (text) => <a href="#">{text}</a>
            }, {
                title: '真实姓名',
                dataIndex: 'trueName'
            }, {
                title: 'Email',
                dataIndex: 'email'
            }, {
                title: '电话号码',
                dataIndex: 'callNum'
            }, {
                title:'创建时间',
                dataIndex:'createTime'
            },{
                title: '操作',
                dataIndex: 'id',
                key: 'x',
                render: (text) => {
                    return (
                        <ButtonGroup>
                            <Button type="primary" icon="edit">编辑</Button>
                            <Button type="primary" icon="delete">删除</Button>
                        </ButtonGroup>
                    )
                }
            }
        ];
        return (<Table columns={columns} loading={loading} dataSource={list} pagination={pagination} onChange={fun} bordered/>)
    }
}


export default connect((state) => {
    return {state: state.listReduce}
})(createForm()(Index))
